<template>
  <div class="wrapper">
    <div class="flex items-center gap-2">
      <div class="relative w-[24px] h-[38px]">
        <n-icon class="bottom-[7px] absolute text-[28px] text-[--main-color]">
          <Fire></Fire>
        </n-icon>
      </div>
      <div class="flex-1 text-[24px] font-[500] text-[#303030]">
        {{ $t("title.超级优惠") }}
      </div>
      <div>
        <moreLink :to="`/#/search/${props.mainCategory.esName}`"></moreLink>
      </div>
    </div>
    <div class="flex gap-4 mt-4 select-wrapper">
      <div class="flex-1">
        <div class="text-[16px] mb-[8px] font-[300] text-[#5C5C5C]">
          {{ $t("button.选择主类") }}
        </div>
        <n-select
          v-model:value="categoryPrimaryTxt"
          :options="categoryData"
          filterable
          @update:value="onChangeCategoryPrimary"
        />
      </div>
      <div class="flex-1">
        <div class="text-[16px] mb-[8px] font-[300] text-[#5C5C5C]">
          {{ $t("button.选择副类") }}
        </div>
        <n-select
          v-model:value="categorySubTxt"
          :options="categorySubData"
          filterable
          @update:value="onChangeCategorySub"
        />
      </div>
    </div>

    <div class="mt-4">
      <div
        v-if="goodsList && goodsList.length > 0"
        class="flex gap-2 text-[16px] font-[300] text-[#767676]"
      >
        <div class="flex-1 w-0">{{ $t("common.商品") }}</div>
        <div class="w-[90px] text-center">{{ $t("common.单价") }}(MXN)</div>
        <div class="w-[110px] text-right">{{ $t("common.销量") }}</div>
      </div>
      <n-spin :show="loading">
        <template #description>
          <div class="text-[--main-color]">{{ $t("common.加载中") }}...</div>
        </template>

        <div class="item-wrapper h-[450px]">
          <div
            class="flex items-center gap-2 p-[5px] mb-[5px]"
            v-for="(goods, i) in goodsList"
            :key="i"
            @click="goGoods(goods.offerId)"
            v-if="goodsList && goodsList.length > 0"
          >
            <div class="flex-1 w-0 text-[0] h-[50px] flex gap-2 items-center">
              <div class="w-[50px] h-[50px] rounded-[4px] overflow-hidden">
                <img class="w-[50px] h-[50px] object-cover" :src="goods.imageUrl" />
              </div>

              <div class="flex-1 h-full w-0 text-[16px] font-[300] text-[#303030]">
                <n-ellipsis style="width: 100%" :tooltip="false" :line-clamp="2">
                  {{ goods.subjectTrans }}
                </n-ellipsis>
              </div>
            </div>
            <div class="w-[90px] flex justify-end">
              <money
                :moneyStyle="{ fontWeight: 300, fontSize: '16px' }"
                :money="goods.priceInfo?.price"
                :is-cny="false"
              ></money>
            </div>
            <div class="w-[110px] text-[16px] text-right font-[300]">
              {{ formatMoney(goods.monthSold, 0) }}
            </div>
          </div>
          <span
            class="font-[300] block text-[24px] text-[#AAA] pt-[180px] px-[60px]"
            v-else
          >
            {{ $t("tips.根据类别未找到商品") }}
          </span>
        </div>
        <div
          v-if="goodsList && goodsList.length > 0"
          class="page-wrapper flex items-center gap-2 text-right text-[#303030]"
        >
          <div class="flex-1"></div>
          <n-icon
            class="cursor-pointer"
            :class="page == 1 ? 'text-[#e1e1e1]' : ''"
            @click="changePage(page - 1)"
          >
            <ChevronBack></ChevronBack>
          </n-icon>
          <span :class="page == 1 ? 'active' : ''" @click="changePage(1)">1</span>
          <span :class="page == 2 ? 'active' : ''" @click="changePage(2)">2</span>
          <span :class="page == 3 ? 'active' : ''" @click="changePage(3)">3</span>
          <n-icon
            class="cursor-pointer"
            :class="page == 3 ? 'text-[#e1e1e1]' : ''"
            @click="changePage(page + 1)"
          >
            <ChevronForward></ChevronForward>
          </n-icon>
        </div>
      </n-spin>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from "vue";
import { commoditySearch } from "@/api/product";
import { Fire } from "@vicons/carbon";
import money from "@/components/money";
import moreLink from "@/components/moreLink";
import { formatMoney } from "@/utils/formatMoney";
import { ChevronBack, ChevronForward } from "@vicons/ionicons5";
import { goGoods } from "@/utils/common";
import { useUser } from "@/stores/user";
import { useRouter } from "vue-router";

const { category } = useUser();

const props = defineProps({
  mainCategory: {
    type: Object,
  },
});
const loading = ref(false);
const goodsList = ref([]);
const categoryPrimary = ref([]);
const categoryPrimaryTxt = ref("");
const categorySub = ref({});
const categorySubTxt = ref("");

const page = ref(1);
const categoryData = ref([]);

const categorySubData = ref([]);
/**
 * 切换二级分类
 */
const onChangeCategoryPrimary = async (value, option) => {
  let data = categoryPrimary.value?.children.find((x) => x.id == value);
  categorySubData.value = data?.children
    ? data.children.map((x) => {
        return {
          label: x.esName,
          name: x.name,
          value: x.id,
        };
      })
    : [];

  //可能没有三级分类
  if (categorySubData.value && categorySubData.value.length > 0) {
    categorySub.value = categorySubData.value[0];
    categorySubTxt.value = categorySubData.value[0].value;
  } else {
    categorySub.value = [];
    categorySubTxt.value = "";
  }
  page.value = 1;
  getData(data.name);
};

/**
 * 切换三级分类
 */
const onChangeCategorySub = async (value, option) => {
  categorySub.value = option;
  page.value = 1;
  getData(option.name);
};

onMounted(() => {
  categoryPrimary.value = category.find((x) => x.id == props.mainCategory.id);
  categoryData.value = categoryPrimary.value
    ? categoryPrimary.value.children.map((x) => {
        return {
          label: x.esName,
          name: x.name,
          value: x.id,
        };
      })
    : [];
  getData();
});

const getData = async (key) => {
  loading.value = true;
  const { data } = await commoditySearch({
    keywords: key || categorySub.value.name || props.mainCategory.name,
    pageSize: 20,
    page: key ? 1 : page.value,
    filter: "certifiedFactory",
    sort: '{"monthSold":"desc"}',
  });
  goodsList.value = data.data.data?.slice(0, 7);
  page.value = data.data.currentPage;
  loading.value = false;
};

const changePage = (_page) => {
  if (_page < 1) return;
  if (_page > 3) return;
  page.value = _page;
  getData();
};
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #fff;
  border-radius: 8px;
  // height: 654px;
  flex: 1;
  padding: 24px;

  .item-wrapper {
    > div:hover {
      background-color: #faf9f8;
      cursor: pointer;
      border-radius: 4px;
    }
  }
}

.select-wrapper {
  &::v-deep(.n-base-selection .n-base-selection-label) {
    background-color: #f3f3f3;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    .n-base-selection-label__render-label {
      color: #303030;
      font-weight: 300;
    }
  }
}

.page-wrapper {
  > span {
    cursor: pointer;
    &.active {
      color: var(--main-color);
    }
  }
}
</style>
